<template>
  <div class="content">
    <!-- 面包屑 -->
    <div class="bread">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item>酒店</el-breadcrumb-item>
        <el-breadcrumb-item>{{state2}}酒店预约</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!-- 筛选查询栏 -->
    <div class="check">
      <el-autocomplete
        class="inline-input city"
        v-model="state2"
        :fetch-suggestions="querySearch"
        placeholder="请输入内容"
        :trigger-on-focus="false"
        @select="handleSelect"
      ></el-autocomplete>
      <div class="block">
        <el-date-picker
          v-model="value1"
          type="daterange"
          range-separator="-"
          value-format="yyyy-MM-dd"
          start-placeholder="入住日期"
          end-placeholder="离店日期"
          :picker-options="pickerOptions"
        ></el-date-picker>
      </div>
      <div class="demo-input-size people"></div>
      <div>
        <!--刘杰start  -->
        <el-form>
          <el-form-item>
            <el-popover placement="bottom-start" width="330" ref="popover">
              <div class="hotel_search_bar_person">
                <span>每间</span>
                <div>
                  <el-select size="mini" v-model="adult" @change="adultChange">
                    <el-option v-for="(item, index) in 7" :key="index" :label="item" :value="item"></el-option>
                  </el-select>
                  <el-select size="mini" v-model="child" @change="childChange">
                    <el-option
                      v-for="(item, index) in 4"
                      :key="index"
                      :label="index"
                      :value="index"
                    ></el-option>
                  </el-select>
                </div>
              </div>
              <!-- <div style="background-color:#ccc;height:1px"></div> -->
              <div style="text-align: right; margin-top: 10px">
                <el-button type="primary" size="mini" @click="handleClick">确定</el-button>
              </div>
              <el-input
                placeholder="人数未定"
                suffix-icon="el-icon-user"
                v-model="person"
                slot="reference"
              >></el-input>
            </el-popover>
          </el-form-item>
        </el-form>
        <!-- 刘杰end -->
      </div>
      <el-row class="price">
        <el-button type="primary">查看价格</el-button>
      </el-row>
    </div>
    <!-- 区域/地图/均价 -->
    <div class="address_item_map">
      <div class="address_item">
        <div class="address_area">
          <span class="district">区域：</span>
          <div class="address_list" style="height:60px" ref="district">
            <span
              style="padding-right:10px;line-height:1.5"
              v-for="(item,index) in addressName"
              :key="index"
            >{{item.name}}</span>
          </div>
        </div>
        <a v-on:click.prevent="breviary" class="other">
          <i class="el-icon-d-arrow-right"></i>
          <i>等29个区域</i>
        </a>
        <div class="average_price">
          <i>
            均价
            <el-tooltip
              class="item"
              effect="dark"
              content="等级均价由平日价格计算得出，节假日价格会有上浮。"
              placement="top-start"
            >
              <i class="el-icon-question"></i>
            </el-tooltip>：
          </i>
          <el-tooltip
            class="item"
            effect="dark"
            content="等级评定是针对房价，设施和服务等各方面水平的综合评估。"
            placement="bottom-start"
            :visible-arrow="visibleArrow"
          >
            <i class="iconfont iconhuangguan"></i>
          </el-tooltip>
          <i>￥321</i>
        </div>
      </div>
      <div class="map">
        <Map :list="changeHoteLocation" />
      </div>
      <div class="hotel"></div>
    </div>
    <!-- 筛选 -->
    <div v-if="filterData" style="margin-top:20px">
      <HotelFilter @delEvery='delEvery' :form="Parameter" @optionChange="optionChange" :filterData="filterData" @changeMoney="changeMoney" />
    </div>
    <!-- 酒店详情 -->
    <div v-if="form">
      <Hotel :cityForm="pageList" />
    </div>
    <div class="el_paging">
      <el-pagination
        @current-change="handleCurrentChange"
        layout="prev, pager, next"
        :total="10"
        :prev-text="prevText"
        :next-text="nextText"
        :current-page="currentPage"
        :page-size="pageSize"
      ></el-pagination>
    </div>
  </div>
</template>


<script>

import Qs from "qs"
export default {
  data() {
    return {
      // 成人
      adult: "2成人",
      child: "0儿童",
      // 人数
      person: "",
      //```````
      filterData: null,
      value1: "",
      input1: "",
      visibleArrow: false,
      prevText: "上一页",
      nextText: "下一页",
      form: "",
      state2: "",
      addressName: [],
      isShow: true,
      pickerOptions: {
        disabledDate(date) {
          const caTime = date.getTime();
          return caTime + 86400000 < Date.now();
        },
      },
      pageList: [],
      list: null,
      currentPage: 1,
      pageSize: 5,
      cityId: "",
      Parameter: {
        price_lt:4000,
        hotellevel: [],
        hoteltype: [],
        hotelbrand: [],
        hotelasset: [],
      },
    };
  },
  async created() {
    let res = await this.$axios.get("/hotels/options");
    this.filterData = res.data.data;
  },
  computed: {
    changeHoteLocation() {
      if (this.list) {
        const lists = this.list.map((v) => {
          return {
            name: v.name,
            location: [v.location.longitude, v.location.latitude],
          };
        });
        return lists;
      }
    },
  },
  mounted() {
    this.$axios({
      url: `/hotels`,
      method: "GET",
    }).then((res) => {
      this.form = res.data;
      this.list = this.form.data;
      this.countList();
    });
    this.changeCity();
    if (this.$route.query.cityName) {
      this.$axios
        .get("/cities", {
          params: {
            name: this.$route.query.cityName,
          },
        })
        .then((res) => {
          this.addressName = res.data.data[0].scenics;
        });
    }
  },
  methods: {
    delEvery(){
      this.Parameter = {
        price_lt:4000,
        hotellevel: [],
        hoteltype: [],
        hotelbrand: [],
        hotelasset: [],
      }
    },
    optionChange(field, id) {
      let index = this.Parameter[field].findIndex((v) => v === id);
      if (index === -1) {
        this.Parameter[field].push(id);
      } else {
        this.Parameter[field].splice(index, 1);
      }
    },
    adultChange(val) {
      this.adult = val + "成人";
    },
    childChange(val) {
      this.child = val + "儿童";
    },
    handleClick() {
      this.person = this.adult + " " + this.child;
      this.$refs.popover.doClose();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.countList();
    },
    countList() {
      this.pageList = this.list.filter((v, index) => {
        const start = (this.currentPage - 1) * this.pageSize;
        const end = this.currentPage * this.pageSize;
        if (index >= start && index < end) {
          return true;
        } else {
          return false;
        }
      });
    },
    changeMoney(money){
      this.Parameter.price_lt = money
  },
    changeCity() {
      this.state2 = this.$route.query.cityName;
    },
    querySearch(queryString, cb) {
      this.$axios
        .get("/cities", {
          params: {
            name: queryString,
          },
        })
        .then((res) => {

          this.addressName = res.data.data[0].scenics;

          const list = res.data.data.map((v) => ({
            value: v.name,
          }));
          cb(list);
        });
    },
    createFilter(queryString) {
      return (restaurant) => {
        return (
          restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) ===
          0
        );
      };
    },
    handleSelect(item) {
      this.$router.push("/hotel?cityName=" + item.value);
      this.state2 = item.value;
      this.changeCity();
    },
    breviary() {
      if (!this.isShow) {
        this.$refs.district.style.height = "60px";
        this.isShow = !this.isShow;
      } else {
        this.$refs.district.style.height = "auto";
        this.isShow = !this.isShow;
      }
    },
    async initPage() {
      let res = await this.$axios.get("/hotels", {
        params: this.Parameter,
        paramsSerializer: function (params) {
          let cityUrl = Qs.stringify(params, { arrayFormat: "repeat" });
          return cityUrl;
        }
      });
      this.pageList = res.data.data;

    },
  },
  watch: {
    Parameter: {
      handler(){
        this.initPage();
      },
      deep:true
    },
    async $route() {
      this.changeCity();
      this.$axios
        .get("/cities", {
          params: {
            name: this.$route.query.cityName,
          },
        })
        .then((res) => {
          this.addressName = res.data.data[0].scenics;
          this.cityId = res.data.data[0].id;
        });
    },

    cityId() {
      this.$axios
        .get("/hotels", {
          params: {
            city: this.cityId,
          },
        })
        .then((res) => {
          this.form = res.data;
          this.list = this.form.data;
          this.countList();
        });
    },
  },
};
</script>



<style lang="less" scoped>
.hotel_search_bar_person  {
  border-bottom: 1px solid #ccc;
  padding-bottom: 20px;
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  span {
    width: 150px;
  }
  div {
    flex: 1;
    display: flex;
    .el-select {
      width: 100px;
      margin-left: 10px;
    }
  }
}
.content {
  width: 1000px;
  margin: 20px auto;
  .check {
    margin: 20px 0;
    display: flex;
    justify-content: space-around;
    .city {
      width: 210px;
    }
    .block {
      margin-left: 15px;
    }
    .people {
      margin: 0 10px;
    }
  }
  .address_item_map {
    display: flex;
    justify-content: space-between;
    .address_item {
      font-size: 14px;
      color: #666;
      .address_area {
        display: flex;
        .district {
          display: inline-block;
          width: 50px;
        }
        .address_list {
          width: 515px;
          overflow: hidden;
        }
      }
      .other {
        margin-left: 45px;
        .el-icon-d-arrow-right {
          transform: rotate(-90deg);
          color: rgb(255, 164, 132);
        }
      }
      .iconhuangguan {
        color: rgb(255, 153, 0);
      }
    }
    .map {
      width: 420px;
      height: 260px;
    }
  }
}
.el_paging {
  display: flex;
  flex-direction: row-reverse;
}
</style>